<template>
  <view class="page">
    <div class="header">
      <div class="designer-user">
        <img class="designer-avatar" :src="designerUser.avatar" alt="店铺logo" />
        <div class="user-profile">
          <h1 class="name">{{ designerUser.nickname }}</h1>
        </div>
        <template v-if="designerUser.uid != useAuth.user.uid">
          <button class="like-btn" v-if="designerUser.follow" @click.stop.prevent="bindTap('u')">+ 关注</button>
          <button class="like-btn accent-black" v-else @click.stop.prevent="bindTap('f')">已关注</button>
        </template>

      </div>
      <p class="profile">
        {{ designerUser.introduction }}
      </p>

      <div class="num-tabs">
        <div class="num-tab">
          <div class="num-count">{{ designerUser.totalOrders || 0 }}</div>
          <div class="num-label">销售量</div>
        </div>
        <div class="num-tab">
          <div class="num-count">{{ designerUser.designerLikeCount || 0 }}</div>
          <div class="num-label">获赞</div>
        </div>
        <div class="num-tab">
          <div class="num-count">{{ designerUser.designerFollowCount || 0 }}</div>
          <div class="num-label">粉丝</div>
        </div>
<!--        <div class="num-tab">-->
<!--          <div class="num-count">{{ designerUser.followCount || 0 }}</div>-->
<!--          <div class="num-label">关注</div>-->
<!--        </div>-->
      </div>
    </div>

    <div class="nav-ul">
      <wd-drop-menu :custom-class="tabActive === 0 ? 'custom-class' : ''" style="flex: 1; min-width: 0">
        <wd-drop-menu-item v-model="value1" :options="option" :title="`作品(${designerUser?.productCount || 0})`" @change="handleAiProductOrderByChange" />
      </wd-drop-menu>
      <view :class="{ active: tabActive === 1 }" class="like-filter" @click="bindTab(1)"> 喜欢</view>
    </div>
    <div class="body-content">
      <div class="good-list" v-if="tabActive === 0">
        <template v-for="(product, index) in designerProductData.products" :key="index">
          <GoodItem :product="product"></GoodItem>
        </template>
      </div>
      <template v-if="tabActive === 0">
        <un-data class="un-data-content" v-if="!designerProductData?.products?.length" ></un-data>
      </template>
      <template v-if="tabActive === 1" >
        <LikeGood :designerId="designerId" style="width: 100%; height: 50vh;"></LikeGood>
      </template>
    </div>
  </view>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import GoodItem from '@/components/good/GoodItem.vue';
import UnData from '@/components/un-data/UnData.vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { useRouter } from 'uni-mini-router';
import { followUnfollowDesigner, getDesignInfoById, getProductsCount } from "@/api/designUser";
import { searchDesignersData } from '@/api/searchApi';
import LikeGood from '@/pages/designer/components/LikeGood.vue';
import { useAuthStore } from "@/state/modules/user";

const useAuth = useAuthStore();

const value1 = ref('');
const value2 = ref(null);
const option = ref<Record<string, any>[]>([
  { label: '上传时间', value: 'createTime' },
  { label: '销售量', value: 'orders' },
  { label: '获赞量', value: 'productsLike' },
]);

const router = useRouter();
const pageLayoutRef = shallowRef(null);
const designerUser = ref({});
const designerId = ref('');
const tabActive = ref(0);
const designerProductData = shallowRef({
  products: [],
});

const handleAiProductOrderByChange = (value) => {
  tabActive.value = 0;
  value1.value = value.value;
  queryProducts();
};

const bindTab = (tab) => {
  tabActive.value = tab;
  queryProducts();
};

onLoad((option) => {
  designerId.value = option.id;
});

const workCount = ref(0)

onShow(() => {
  queryDesignUser();
  queryProducts();

  getProductsCount(
    { designerUid: designerId.value,}
  ).then(res => {
      workCount.value = res.data;
  })
});

function queryProducts(page = 1) {
  const data = {
    page: page,
    limit: 1000,
    orderBy: value1.value,
    designerUid: designerId.value,
  };
  searchDesignersData(data).then((res) => {
    designerProductData.value = res.data[0];
  });
}

function queryDesignUser() {
  getDesignInfoById(designerId.value).then((res) => {
    designerUser.value = res.data;
  });
}

const bindGo = (path) => {
  router.push({ path });
};
const bindTap = (type) => {
  followUnfollowDesigner({ designerUid: designerId.value, type }).then(() => {
    designerUser.value.follow = !designerUser.value.follow;

    designerUser.value.designerFollowCount = Number(designerUser.value.designerFollowCount) + (type === 'u' ? 1 : -1);
  });
};
</script>

<style scoped lang="scss">
.body-content {
  flex: 1;
}
.page {
  background: #f3f7f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  padding: 32rpx 32px 0;
  background: #ffffff;
}
.designer-user {
  display: flex;
  align-items: center;
  height: 128rpx;
  .designer-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 58rpx 58rpx 58rpx 58rpx;
  }
  .user-profile {
    margin: 0 20px;
    .name {
      height: 38rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      line-height: 38rpx;
    }
    .profile {
      height: 28rpx;
      font-weight: 400;
      font-size: 20rpx;
      color: #6f6f6f;
      line-height: 28rpx;
      margin: 4px 0 0;
    }
  }
  .like-btn {
    width: 108rpx;
    height: 48rpx;
    background: #ffffff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    font-weight: 400;
    font-size: 28rpx;
    text-align: center;
    line-height: 48rpx;
    padding: 0;
    border: 2rpx solid #b7b7b7;
    color: #b7b7b7;
    margin-right: 16rpx !important;
    &.accent-black {
      border: 2rpx solid #f25a27;
      color: #f25a27;
    }
  }
}

.profile {
  font-weight: 400;
  font-size: 28rpx;
  color: #222222;
  line-height: 38rpx;
  text-align: left;
}
.num-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 128rpx;
  .num-tab {
    .num-count {
      font-weight: bold;
      font-size: 32rpx;
      color: #222222;
      line-height: 42rpx;
      text-align: center;
    }
    .num-label {
      height: 32rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
      line-height: 32rpx;
      text-align: center;
    }
  }
}

//.nav-ul {
//    display: grid;
//    grid-template-columns: 1fr 1fr;
//    border-top: 2rpx solid #f2f2f2;
//    background: #ffffff;
//    .like-filter {
//        height: 84rpx;
//        line-height: 84rpx;
//        text-align: center;
//    }
//}

.good-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16rpx;
  margin: 16rpx;
}

.un-data-content {
  display: flex;
  flex: 1;
  margin-top: 260rpx;
}

.nav-ul {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 2rpx solid #f2f2f2;
  background: #ffffff;
  z-index: 10;

  .like-filter {
    height: 84rpx;
    line-height: 84rpx;
    text-align: center;

    &.active {
      color: #f25a27;
    }
  }
}
</style>
<style lang="scss">
.nav-ul :deep(.u-dropdown__content__mask) {
  display: none;
}

.custom-class {
  &:deep(.wd-drop-menu__item-title-text) {
    color: #f25a27;
  }

  &:deep(.wd-icon) {
    color: #f25a27;
  }
}

.un-data{
  margin: 160rpx auto 0;
}
</style>
